<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="description" content="Web Mark">
<script>
document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
</script>
<style type="text/css">
body{
 	background: #252222;
 	font-size: 62.5%;
 	overflow: hidden;
 	padding: 0;
 	margin: 0;

 }


.app-loading{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: #FFF;
	text-shadow: 0 0 4px #333;
	text-align: center;
}
.app-loading-logo{
	text-align: center;
	margin: 50% auto;

}
.app-loading-bar{
	margin: 0 auto;
	font-size: 14px;
	color: #FFF;
	margin-top: 6em;
    margin-left: -5em;
    width: 10em;
    text-align: center;


	
}

 
@keyframes loading-inner
{
	0% {
		transform:	perspective(100px) rotateX(0deg) rotateY(0deg) scale(.9);
	}

	30% {
		transform:	rotateX(0deg) rotateY(0deg) scale(.9);
	}


	/* turn 1 */
	40% {
		transform: rotateX(160deg)	rotateY(40deg) scale(.9);
	}

	50% {
		transform: rotateX(200deg)	rotateY(190deg) scale(.9);
	}

	60% {
		transform: rotateX(270deg)	rotateY(80deg) scale(.9);
	}

	

	70% {
		transform:	rotateX(0deg) rotateY(0deg) ;
	}


	65% {
		transform:	rotateX(-20deg);
	}
	70% {
		transform:	rotateX(20deg);
	}
	75% {
		transform:	rotateX(0deg);
	}

	80% {
		transform:	scale(.9);
	}

	85% {
		transform:	scale(.9);
		opacity: 1;
	}

	95% {
		transform:	scale(.9);
		opacity: 1;
	}

	100% {
		transform:	scale(1.5);
		opacity: 0;
	}
	

}



@keyframes loading-outer
{
	0% {
		transform:	perspective(100px) rotateX(0deg) rotateY(0deg) scale(.9);
	}

	5% {
		transform:	rotateX(0deg) rotateY(0deg) scale(.9);
	}

	10% {
		transform:	scale(1);
	}


	20% {
		transform:	scale(1);
	}

	30% {
		transform:	rotateX(0deg) rotateY(60deg) ;
	}

	35% {
		transform:	rotateX(45deg) rotateY(120deg) ;
	}

	40% {
		transform:	rotateX(185deg) rotateY(180deg) ;
	}
	45% {
		transform:	rotateX(100deg) rotateY(210deg) ;
	}

	50% {
		transform:	rotateX(150deg) rotateY(290deg) ;
	}
	

	60% {
		transform:	rotateX(0deg) rotateY(0deg) ;
	}

	67% {
		transform:	rotateX(-20deg);
	}
	72% {
		transform:	rotateX(20deg);
	}
	77% {
		transform:	rotateX(0deg) scale(1);
	}

	80% {
		transform:	scale(.9);
	}

	85% {
		transform:	scale(.9);
		opacity: 1;
	}


	100% {
		transform:	scale(1.5);
		opacity: 0;
	}

}

@keyframes loading-center-bg {
	0%{
		box-shadow: 0 0 0 0 #ff194a;
	}

	85%{
		box-shadow: 0 0 0 0 #ff194a;
	}
	90%{
		box-shadow: 0 0 15em 50em #ff194a;
	}

	92%{
		box-shadow: 0 0 15em 50em #ff194a;
	}
	
	95%{
		box-shadow: 0 0 15em 50em #ff194a;
		transform:   scale(1);
	}
	100%{
		box-shadow: 0 0 0 0 #ff194a;
		transform:  scale(0);
	}
}

@keyframes loading-center {
	0%{
	}
	70%{
	}
	80%{
		transform: rotateZ(0deg) scale(1);
	}
	90%{
		transform: rotateZ(0deg) scale(1);
	}

	95%{
		transform: rotateZ(360deg) scale(0);
	}
	

	100%{
		transform:  rotateZ(360deg) scale(0);
	}

}

.loading-section{
	position: absolute;
	display: block;
	width: 1px;
	height: 1px;
	transform-style: preserve-3d;
	top: 0;
	bottom: 0;
	left:0;
	right:0;
	margin: auto ;
}
.loading-center-bg{
	background: #ff194a;
 	border-radius: 50%;
 	position: absolute;
 	width: 5em;
 	height: 5em;
 	margin-left: -2.5em;
	margin-top: -2.5em;
	box-shadow: 0 0 1em #ff194a;
	background-size:100% 100%;
 	perspective: 1em;
}
 .loading-center{
 	background: #ff194a;
 	border-radius: 50%;
 	position: absolute;
 	color: #FFF;
 	width: 5em;
 	height: 5em;
 	margin-left: -2.5em;
	margin-top: -2.5em;
	font-weight: bold;
 	background: url("") no-repeat #ff194a;
 	background-size:100% 100%;

 	perspective: 1em;
 	// animation:loading-center 6s linear forwards ;
 }
 .loading-center-circle-inner {
 	border: .8em solid #FFF;
 	border-radius: 50%;
 	position: absolute;
 	
 	width: 7.4em;
 	height: 7.4em;
 	margin-left: -3.7em;
	margin-top: -3.7em;
 	perspective: 1em;
	//transform:rotate3d(-1,1,0,40deg);
	//transform: rotateX(60deg);
	//animation:loading-inner 5s ease-in-out forwards ;
 }
  .loading-center-circle-outer {
 	border: .8em solid #ff194a;
 	border-radius: 50%;
 	position: absolute;
 	width: 9.2em;
 	height: 9.2em;
 	margin-left: -4.6em;
	margin-top: -4.6em;
 	perspective: 1em;
 	//animation:loading-outer 5s ease-in-out forwards;
 }
video {
	display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<title>Aloha 两周年庆</title>
<body >
	<div id="app" >
		<div class="app-sound-icon" >
		</div>
		<audio  loop='loop' class="app-sound" src="sound/sound.m4a" ></audio>
		<div class="app-loading" >
			<div class="app-loading-logo">
				<div class='loading-section' >
					<div class='loading-center'></div>
					<div class='loading-center-circle-inner'></div>
					<div class='loading-center-circle-outer'></div>
					<div class="app-loading-bar" >loading...(0%)</div>
				</div>

			</div>
			
		</div>
		<div class="page-wrap" >
			<img  class='page-horn-1' src="image/page-horn-1.png" />
			<img  class='page-horn-2' src="image/aloha_logo.png" />
			<img  class='page-horn-3' src="image/page-horn-3.png" />
			<img  class='page-horn-4' src="image/page-horn-4.png" />
		</div>
		<div class="scene scene-1">
			<div class='banner-section' >
				<img class='banner-1' src="image/banner-1.png" />
				<img class='banner-2' src="image/banner-2.png" />
			</div>
			<div class='loading-section' >
				<div class="loading-center-bg" ></div>
				<div class='loading-center'></div>
				<div class='loading-center-circle-inner'></div>
				<div class='loading-center-circle-outer'></div>
			</div>
		</div>

		<div class="scene scene-2">
			<img class="scene-2-smoke" src="./image/scene-2-0.png" />
			<img class="scene-2-people" src="./image/scene-2-1.png" />
			<img class="scene-2-banner" src="./image/scene-2-2.png" />

			<img class="scene-2-shade scene-2-shade-1"  src="./image/scene-2-shade.png" />
			<img class="scene-2-shade scene-2-shade-2" src="./image/scene-2-shade2.png" />

		</div>

		<div class="scene scene-3">

			<img class="scene-3-bg" src="./image/scene-3-background.png" />
			<img class="scene-3-poster" src="./image/scene-3-2.png" />

			<img class="scene-3-light scene-3-light-1"  src="./image/scene-3-light.png" />
			<img class="scene-3-light scene-3-light-2" src="./image/scene-3-light2.png" />
			

		</div>

		<div class="scene scene-9">
			<img class="scene-9-bg" src="./image/9-bg.png"  />
			<img class="scene-9-left" src="./image/9-0.png"  />
			<img class="scene-9-right" src="./image/9-1.png"  />
			
		</div>

		<div class="scene scene-4">
			
			<img class="scene-4-poster" src="./image/gogo-1.png" />
			<img class="scene-4-poster-s" src="./image/gogo-2.png" />

		</div>

		<div class="scene scene-5">
			
			<img class="scene-5-poster" src="./image/scene-5-dj.png" />

		</div>

		<div class="scene scene-6">
			

			<div class="scene-6-location">
				<div class="scene-6-map" ></div>
				<img class="scene-6-point" src="./image/point.png" />
			</div>
			
			<img class="scene-6-title" src="./image/location-title.png" />

			
			<div class="scene-6-location-info" >
				<img class="scene-6-location-img" src="./image/location-info.png" />
			</div>
			<div class="scene-6-pics-wrap" >

				<div class="pics-list" >
					<img class="pics-item" src="./image/pics/pic1.png" />
					<img class="pics-item" src="./image/pics/pic2.png" />
					<img class="pics-item" src="./image/pics/pic3.png" />
					<img class="pics-item" src="./image/pics/pic4.png" />
				</div>
				<div class="pics-list-text" >
					<img class="pics-item-text" src="./image/pics/text1.png" />
					<img class="pics-item-text" src="./image/pics/text2.png" />
					<img class="pics-item-text" src="./image/pics/text2.png" />
					<img class="pics-item-text" src="./image/pics/text3.png" />
				</div>
				<div class="pics-wrap-btn-left" >
					
				</div>
				<div class="pics-wrap-btn-right" ></div>

			</div>
			<img class="scene-6-location-more" src="./image/pics/more-btn.png" />

			<img class="scene-6-location-ret" src="./image/pics/ret-btn.png" />

		</div>

		<div class="scene scene-7">
			<div class="scene-7-wrap" >
<!-- 				<img class="scene-7-ticket" src="./image/ticket.png"  />
 -->				<div class="ticket-href-section" >
					<a class="ticket-a" href="https://weidian.com/i/1957220126?wfr=c" >
						<img  class="ticket-img" src="./image/ticket/ticket-1.jpg" />
					</a>
					<a class="ticket-a" href="https://weidian.com/i/1960236993?wfr=c" >
						<img class="ticket-img" src="./image/ticket/ticket-2.jpg" />
					</a>
					<a class="ticket-a" href="https://weidian.com/i/1960234072?wfr=c" >
						<img class="ticket-img" src="./image/ticket/ticket-3.jpg" />
					</a>
					<a class="ticket-a" href="https://weidian.com/i/1960237723?wfr=c" >
						<img class="ticket-img" src="./image/ticket/ticket-4.jpg" />
					</a>
					<a class="ticket-a" href="https://weidian.com/i/1960239126?wfr=c" >
						<img class="ticket-img" src="./image/ticket/ticket-5.jpg" />
					</a>
					<a class="ticket-a" href="https://weidian.com/i/1960240263?wfr=c" >
						<img class="ticket-img" src="./image/ticket/ticket-6.jpg" />
					</a>
				</div>
				
			</div>
		</div>
		<div class="scene scene-10">
			<video  poster="image/poster.jpg" type="video/mp4"  src="video/aloha.mp4" ></video>
			<img class="play-video-btn" src="image/play.png" />
		</div>
		<div class="scene scene-8">
			<img class="scene-8-banner" src="./image/support-banner2.png"  />
		</div>
	</div>
	
	

<script type="text/javascript" src="javascript/zepto.js"></script>
<script type="text/javascript" src="javascript/zepto.fx.js"></script>
<script type="text/javascript" src="javascript/zepto.touch.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/main.js"></script>

</body>
</html>